<template>
    <view>
        <view class="menu-avatar main-bg-color ">
            <view class="cu-form-group top ">
                <view class="cu-item flex-sub" @tap="onToScoreList" data-index="1" data-id="1">
                    <view v-text="user.score">
                    </view>
                    <view class="">我的积分</view>
                </view>
            </view>

        </view>
        <view class="group-bottom">
            <view class="cu-form-group vip-group ">
                <view class="cu-avatar  lg">
                    <view class="text-gray cuIcon-qiandao"></view>
                </view>
                <view class="content">
                    <view class="text-black text-lg">{{ user.signIn ? '今天已签到' : '签到得积分' }}</view>
                    <view class="text-grey">
                        <text class="text-grey text-sm">
                            开通会员签到积分翻倍
                        </text>
                    </view>
                </view>

                <view class="action">
                    <button class="cu-btn  cu-btn-oval" :class="user.signIn ? 'bg-yellow light' : 'bg-green'" :data-id="item.id"
                        @tap.stop="onSignIn">
                        {{ user.signIn ? '已签到' : '马上签到' }}
                    </button>
                </view>
            </view>
            <view class="cu-form-group  customer-group">
                <view class="cu-avatar sm ">
                    <view class="main-color cuIcon-point"></view>
                </view>
                <view class="content">
                    <view class="text-black text-lg">增加积分</view>
                </view>
            </view>
            <view class="cu-form-group  customer-group  " @click="onToRechargeScore">
                <view class="cu-avatar  lg">
                    <view class="text-gray cuIcon-recharge"></view>
                </view>
                <view class="content">
                    <view class="text-black text-lg">积分充值</view>
                    <view class="text-grey">
                        <text class="text-grey text-sm">
                            随用随充，乐在其中
                        </text>
                    </view>
                </view>
                <view class="action">
                    <button class="cu-btn bg-green cu-btn-oval">
                        去充值
                    </button>
                </view>
            </view>
            <view class="cu-form-group  customer-group  " @click="onToInvite">
                <view class="cu-avatar  lg">
                    <view class="text-gray cuIcon-share"></view>
                </view>
                <view class="content">
                    <view class="text-black text-lg">邀请好友</view>
                    <view class="text-grey">
                        <text class="text-grey text-sm">
                            邀请一个新人获得{{ configure.inviteScore }}积分，开通会员积分翻倍
                        </text>
                    </view>
                </view>
                <view class="action">
                    <button class="cu-btn bg-green cu-btn-oval">
                        去邀请
                    </button>
                </view>
            </view>
            <view class="cu-form-group  customer-group  " @click="onToLookAd">
                <view class="cu-avatar  lg">
                    <view class="text-gray cuIcon-guanggao"></view>
                </view>
                <view class="content">
                    <view class="text-black text-lg">播放广告</view>
                    <view class="text-grey">
                        <text class="text-grey text-sm">
                            播放一次赠送{{ adConfig.awardScore }}积分,当日还有{{ adConfig.leftTimes }}机会
                        </text>
                    </view>
                </view>
                <view class="action">
                    <button class="cu-btn  cu-btn-oval" :class="adConfig.leftTimes <= 0 ? 'text-black' : 'bg-green'">
                        看广告
                    </button>
                </view>
            </view>

            <view class="cu-form-group   customer-group" style="margin-top:25rpx;">
                <view class="cu-avatar sm ">
                    <view class="main-color cuIcon-point"></view>
                </view>
                <view class="content">
                    <view class="text-black text-lg">积分用途</view>
                </view>
            </view>
            <view class="cu-form-group  customer-group" @click="onToHome">
                <view class="cu-avatar  lg">
                    <view class="text-gray cuIcon-erweima"></view>
                </view>
                <view class="content">
                    <view class="text-black text-lg">首页加群需要5积分</view>
                    <view class="text-grey">
                        <text class="text-grey text-sm">
                            开通会员免积分加群
                        </text>
                    </view>
                </view>
                <view class="action">
                    <button class="cu-btn bg-green cu-btn-oval">
                        去加群
                    </button>
                </view>
            </view>
            <view class="cu-form-group  customer-group" @click="onToMyGroup">
                <view class="cu-avatar  lg">
                    <view class="text-gray cuIcon-zhidingdingbu"></view>
                </view>
                <view class="content">
                    <view class="text-black text-lg">置顶群</view>
                    <view class="text-grey">
                        <text class="text-grey text-sm">
                            {{ configure.qrcodeConfig.topQrcode }}积分置顶一小时
                        </text>
                    </view>
                </view>
                <view class="action">
                    <button class="cu-btn bg-green cu-btn-oval">
                        去置顶
                    </button>
                </view>
            </view>
            <view class="cu-form-group customer-group customer-group-ad" v-if="user.vipLevel <= 0">
                <ad unit-id="adunit-04d15a1273f96566"></ad>
            </view>

        </view>

        <view class="cu-modal bottom-modal" :class="showLoginModal ? 'show' : ''">

            <view class="cu-dialog bg-white">
                <view class="cu-bar bg-white  justify-end">
                    <view class="content full-width text-lg">连续登录，赠送积分</view>
                    <view class="action" @tap="onCloseLoginModal">
                        <text class="cuIcon-close text-gray"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    <view class="cu-list grid  saler-cu-list" :class="['col-3']">
                        <view class="cu-item cu-title">
                            <text>天数</text>
                        </view>
                        <view class="cu-item cu-title">
                            <text>普通用户</text>
                        </view>
                        <view class="cu-item cu-title">
                            <text>会员用户</text>
                        </view>
                        <block v-for="(item, index) in user.loginDays" :key="index">
                            <view class="cu-item"  :index="index" :class="item.select" >
                                <text>{{"第"+item.day+"天"}}</text>
                            </view>
                            <view class="cu-item"  :index="index" :class="item.select">
                                <text>{{"赠送"+item.commonScore+"积分"}}</text>
                            </view>
                            <view class="cu-item"  :index="index" :class="item.select" >
                                <text>{{"赠送"+item.vipScore+"积分"}}</text>
                            </view>
                        </block>

                    </view>

                </view>
            </view>
        </view>
        <cu-recharge ref="Recharge" />
    </view>
</template>
<script lang="ts" src="./score.ts"/>
<style scoped>
.cu-avatar {
    background: none;
}

.cu-form-group.top {
    text-align: center;
    height: 250rpx;

}

.cu-form-group.top {
    background: none;
    border: 0;
    padding-bottom: 40rpx;
    color: #ffffff;
}

.cu-form-group.vip-group {
    background-color: white;
    border-radius: 25rpx;
    margin: 0 auto;
    flex: 4;
}

.cu-form-group.vip-group .content {
    flex: 2;
}

.cu-form-group.vip-group .cu-avatar image {
    width: 75rpx;
    height: 75rpx;
}

.group-bottom .cu-form-group {
    width: 93%;
    margin-bottom: 25rpx;
}

.cu-form-group.vip-group {
    background-color: white;
    border-radius: 25rpx;
    margin: 0 auto;
    flex: 4;
}

.cu-form-group.vip-group .content {
    flex: 2;
}

.cu-form-group.vip-group .cu-avatar image {
    width: 75rpx;
    height: 75rpx;
}

.group-bottom .cu-form-group {
    width: 93%;
    margin-bottom: 25rpx;
}

.cu-form-group .address {
    width: 150rpx;
}

.cu-form-group .cu-avatar image {
    width: 100%;
    height: 100%;
}

.cu-form-group picker .picker {
    text-align: left;
}

.tab-container {
    padding-right: 45rpx;
    padding-top: 30rpx;
    padding-bottom: 30rpx;
}

.cu-form-group .title {
    min-width: 140rpx;
}


.lg {
    height: 100rpx;
    width: 100rpx;
}


.margin-top {
    margin-top: 50rpx;
}

.share-bg {
    background-image: url("https://media-cdn.threeperson.com/static/images/share-bg.png");
    background-size: cover;
    background-position: center;
    position: relative;
    background-repeat: no-repeat;
    width: 101%;
    min-height: 138rpx;
    z-index: 1;
}

.group-bottom {
    margin-top: -50rpx;
}

.margin-bottom-20rpx {
    margin-bottom: 20rpx;
}

.cu-bar {
    text-align: center;
}

.cu-bar .content {
    left: auto;
    text-align: center;
    width: 100%;
}

.cu-bar .action:last-child {
    margin-right: unset;
}

/* .cu-list.grid view{
    border: #f1d82d solid 1rpx;
} */
.cu-form-group.customer-group {
    background-color: white;
    margin: 0 auto;
    flex: 4;
}

.cu-form-group.customer-group .content {
    flex: 2;
}

.cu-item.true {
    background-color: #c7f707cf;
}

.activity-icon {
    background: rgb(255 0 0 / 0%);
}

.cu-form-group.customer-group-ad {
    padding: auto 0rpx;
    padding-right: unset;
    padding-left: unset;
}</style>